<template>
  <div class="container">
    <el-row class="card_header" type="flex">
      <div class="exam_title">考试列表</div>
    </el-row>
    <div class="card_container" type="flex">
      <div class="card">
        <el-card class="new_exam_card">
          <div slot="header" class="header">
            <span>新建考试</span>
          </div>
          <div class="body">
            <el-button class="new_exam_button"
                       icon="el-icon-plus"
                       plain
                       @click="dialogFormVisible = !dialogFormVisible"></el-button>
          </div>
        </el-card>
      </div>
      <div class="card" v-for="(item,index) in examList" :key="index">
        <examCard :exam="item" @delectexam="deleteExamHandel"></examCard>
      </div>
    </div>
    <!-- <div class="card_footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[10, 20, 30, 40]"
          :pager-count="5"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total">
      </el-pagination>
    </div> -->
    <el-dialog title="新建考试" :visible.sync="dialogFormVisible" width=60%>
      <el-form ref="form" :model="assistFormData" label-width="80px">
        <el-form-item label="考试名称">
          <el-input v-model="assistFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="考试介绍">
          <el-input v-model="assistFormData.description"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="assistFormData.exam_open_time"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
              v-model="assistFormData.exam_close_time"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="考试组织">
          <el-select v-model="assistFormData.org_id" placeholder="请选择">
            <el-option v-for="(item) in organizationList"
                       :key="item.id"
                       :label="item.org_name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考卷">
          <el-select v-model="assistFormData.tp_id" placeholder="请选择">
            <el-option v-for="(item) in testPaperList"
                       :key="item.tp_id"
                       :label="item.tp_name"
                       :value="item.tp_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限时">
          <el-input-number v-model="assistFormData.limit_time" :step="1" step-strictly></el-input-number>
          <span>               分钟</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="newexam">立即创建</el-button>
          <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axiosinstance from "@/util/http"
import examCard from "@/view/Home/components/ExaminationBase/examCard"

export default {
  name: "Examination",
  computed: {},
  data() {
    return {
      user: null,
      examList: [],
      page: 1,
      pageSize: 10,
      arr: [1, 2, 3, 4],
      formLabelWidth: "100px",
      FormData: {
        name: "",
        description: "",
        org_id: "",
        tp_id: "",
        exam_open_time: 0,
        exam_close_time: 0,
        limit_time: 0
      },
      assistFormData: {
        name: "",
        description: "",
        org_id: "",
        tp_id: "",
        exam_open_time: 0,
        exam_close_time: 0,
        limit_time: 0
      },
      dialogFormVisible: false,
      organizationList: {},
      testPaperList: {},

    }
  },
  methods: {
    async newexam() {
      let that = this;

      let res = await axiosinstance.post('/examination/addexam', {
        exam_name: this.assistFormData.name,
        exam_description: that.assistFormData.description,
        username: this.$store.getters.getuser.username,
        exam_open_time: that.assistFormData.exam_open_time,
        exam_close_time: that.assistFormData.exam_close_time,
        org_id: that.assistFormData.org_id,
        tp_id: that.assistFormData.tp_id,
        limit_time: Number(new Date(that.assistFormData.limit_time * 60 *1000)),
      }).catch(err => console.error(err))
      if (res.data.status === 0) {
        this.$message({
          message: res.data.msg,
          type: 'success'
        })
        // that.assistFormData.name = "";
        // that.assistFormData.description = "";
        // that.assistFormData.exam_open_time=0;
        // that.assistFormData.exam_close_time=0;
        // that.assistFormData.org_id = null;
        // that.assistFormData.tp_id = null;
        // that.assistFormData.limit_time = null;
        that.dialogFormVisible = !that.dialogFormVisible;
        await this.refreshexamList();
      } else this.$message.error({
        message: res.data.msg
      })
    },
    async refreshexamList() {
      console.log("nmsl???")
    axiosinstance.get('/examination/examlist', {
      params: {
        page: this.page,
        pageSize: this.pageSize,
        username: this.user.username
      }
    }).then(res => {
      this.examList = res.data?.data;
      console.log("shuaxin nm?",res.data)
    })

    },
    handleSizeChange(e) {
      console.log(e)
      this.pageSize = e;
      this.refreshexamList()
    },
    handleCurrentChange(e) {
      this.page = e;
      this.refreshexamList()
    },
    async deleteExamHandel(exam_id) {
      console.log("del", exam_id);
      await this.refreshexamList();
      this.$forceUpdate();

      }

  },
  components: {
    examCard
  },
  created() {

    this.user = this.$store.getters.getuser;
    console.log(this.user)
    console.log(this.page, this.pageSize)
    //请求考试列表
    axiosinstance.get('/examination/examlist', {
      params: {
        page: this.page,
        pageSize: this.pageSize,
        username: this.user.username
      }
    }).then(res => {
      this.examList = res.data?.data;
      console.log(res.data)
    })
    //请求试卷列表
    axiosinstance.get('/paper/testpaperlist', {
      params: {
        page: 1,
        pageSize: 200,
        username: this.user.username
      }
    }).then(res => {
      this.testPaperList = res.data.data;
      console.log("请求试卷列表", res.data)
    })
    //请求组织列表
    axiosinstance.get('/organization/organizationlist', {
      params: {
        page: 1,
        pageSize: 200,
        username: this.user.username
      }
    }).then(res => {
      console.log("请求组织列表", res.data)
      this.organizationList = res.data.data.orgs;

    })
  },

}

</script>

<style scoped lang="less">
.container {
  height: 100%;
  position: relative;
  background-color: #e5e5e5;

  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .card_header {
    font-size: 20px;
    font-weight: bold;
    font-color: #123;
    margin: 0 auto;
  }

  .card_container {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    margin: 0 auto;
    padding-left: 180px;

    .card {
      width: 20%;
      //height:150px;
      margin: 1%;

      .new_exam_card {

        height: 100%;
        border: 2px solid rgb(255, 255, 255);
        border-radius: 35px;
        transition-delay: 0.04s;
        transition-duration: 0.7s;

        &:hover {
          transform: translate(0, -5px);
          border-radius: 15px;
          transition-delay: 0.13s;
          transition-duration: 0.7s;
        }

        .header {
        }

        .body {
          .new_exam_button {
            //background:green;
            margin: 0;
            padding: 0;
            border: 0px;
            border-radius: 50%;
            font-size: 80px;
            vertical-align: middle;

            &:hover {

            }
          }
        }
      }
    }
  }
}

.exam_title {
  margin: 20px auto;
}
</style>